<template>
    <view class="form-item_date" :class="detail ? 'is-disabled' : ''">
        <view class="wrap">
            <view class="form-item_input-wrap form-item_date-wrap" @click="showDatePicker">
                <text class="iconfont form-item_icon form-item_icon-time">&#xe66e;</text>
                <input v-model="inputValue" class="form-item_input" type="text" placeholder-class="phcolor"
                    :placeholder="placeholder" readonly>
                <text v-if="!detail" class="iconfont form-item_icon form-item_icon-circle-close"
                    @click.stop="clear">&#xed4e;</text>
                <view class="form-item_mask"></view>
            </view>
        </view>
        <!-- 弹窗 -->
        <u-picker v-model="formDateShow" mode="time" :params="dateParams" :show-time-tag="true" :default-time="defaultTime"
            :end-year="endYear" @confirm="dateConfirm"></u-picker>
    </view>
</template>

<script>
export default {
    name: 'FormItemDateTime',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: String,
        },
        format: {
            type: String,
            default: 'yyyy-mm-dd hh:MM:ss'
        },
        valueFormat: {
            type: String,
            default: 'yyyy-mm-dd hh:MM:ss'
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        dateParams: {
            type: Object,
            default: () => {
                return {
                    year: true,
                    month: true,
                    day: true,
                    hour: true,
                    minute: true,
                    second: true
                }
            }
        },
        detail: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            formDateShow: false,
        }
    },
    computed: {
        clearVisible() {
            return this.formDateShow
        },
        defaultTime() {
            return this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
        },
        endYear() {
            return new Date().getFullYear()
        },
        formatDateTime() {
            if (!this.value) return ''
            return this.$u.timeFormat(this.value, this.format)
        },
        inputValue: {
            get() {
                if (!this.value) return ''
                return this.$u.timeFormat(this.value, this.format)
            },
            set(value) {
                this.$emit('change', value);
            }
        }
    },
    methods: {
        showDatePicker() {
            if (this.detail) return
            this.formDateShow = true
            this.$emit('showAfter')
        },
        clear() {
            this.$emit('change', '')
        },
        dateConfirm({ year, month, day, hour, minute, second }) {
            const field = this.focusedField
            let dateString = this.valueFormat
            const formattedDate = dateString
                .replace('yyyy', year)
                .replace('mm', month)
                .replace('dd', day)
                .replace('hh', hour)
                .replace('MM', minute)
                .replace('ss', second);
            const now = new Date()
            const datetime =
                `${year}-${month}-${day} ${hour || String(now.getHours()).padStart(2, '0')}:${minute || String(now.getMinutes()).padStart(2, '0')}:${second || String(now.getSeconds()).padStart(2, '0')}`
            this.$emit('change', datetime)
        },
    }
}
</script>
<style scoped lang="scss">
.form-item_date {
    width: 100%;
    height: 100%;

    &.is-disabled {
        .wrap {
            .form-item_input-wrap {
                .form-item_input {
                    border: none;
                    color: #606266;
                    background-color: #fff;
                }
            }
        }
    }

    .wrap {
        width: 100%;
        height: 100%;
    }

    &-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        color: #606266;
        position: relative;

        .form-item_input {
            width: 100%;
            min-height: 64rpx;
            line-height: 64rpx;
            border: 2rpx solid #dcdfe6;
            border-radius: 8rpx;
            font-size: 26rpx;
            padding: 0 60rpx;
            background: #fff;
            box-sizing: border-box;
        }

        .form-item_icon {
            position: absolute;

            &-time {
                left: 10rpx;
            }

            &-circle-close {
                right: 0;
                z-index: 10;
            }
        }

        .form-item_mask {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    }
}
</style>